<template>
  <el-container>
    <el-header>退款申请</el-header>
    <el-main>
      <el-form :model="refundForm" label-width="120px">
        <!-- 订单号 -->
        <el-form-item label="充电单号" required>
          <el-input v-model="refundForm.orderNumber" disabled />
        </el-form-item>

        <!-- 联系电话 -->
        <el-form-item label="联系电话">
          <el-input v-model="refundForm.phoneNumber" disabled />
        </el-form-item>

        <!-- 消费金额 -->
        <el-form-item label="消费金额">
          <el-input v-model="refundForm.amount" disabled />
        </el-form-item>

        <!-- 退款金额 -->
        <el-form-item label="退款金额" required>
          <el-input v-model="refundForm.refundAmount" placeholder="请输入退款金额" />
        </el-form-item>

        <!-- 退款原因 -->
        <el-form-item label="退款原因" required>
          <el-input
              type="textarea"
              v-model="refundForm.refundDescription"
              placeholder="请填写退款原因"
          />
        </el-form-item>

        <!-- 上传文件 -->
        <el-form-item label="资料附件">
          <el-upload
              action="/upload"
              list-type="text"
              :on-success="handleFileUpload"
          >
            <el-button size="small" type="primary">选择文件</el-button>
            <div slot="tip" class="el-upload__tip">支持jpg、png、pdf格式文件</div>
          </el-upload>
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitRefund">提交申请</el-button>
          <el-button @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';

const route = useRoute();
const router = useRouter();

// 表单数据
const refundForm = ref({
  orderNumber: '',
  phoneNumber: '',
  amount: 0,
  refundAmount: '',
  refundDescription: '',
  attachment: '' // 文件路径
});

// 加载充电记录详情
const loadRecordDetails = async () => {
  const orderId = route.params.id; // 获取路由参数中的订单ID
  try {
    const response = await axios.get(`/charging/record/${orderId}`);
    Object.assign(refundForm.value, response.data); // 将接口数据填充到表单
    refundForm.value.refundAmount = response.data.amount; // 默认退款金额为消费金额
  } catch (error) {
    console.error('加载充电记录详情失败:', error);
  }
};

// 文件上传成功处理
const handleFileUpload = (response) => {
  refundForm.value.attachment = response.filePath; // 假设后端返回文件路径
};

// 提交退款申请
const submitRefund = async () => {
  try {
    const response = await axios.post('/charging/refundRequest', refundForm.value);
    if (response.data.success) {
      alert('退款申请提交成功');
      router.push('/charging/records'); // 跳转回充电记录页面
    }
  } catch (error) {
    console.error('提交退款申请失败:', error);
  }
};

// 返回到充电记录页面
const goBack = () => {
  router.push('/charging/records');
};

onMounted(loadRecordDetails);
</script>

<style scoped>
.el-container {
  padding: 20px;
}

.el-header {
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 10px;
}

.el-main {
  padding: 20px;
}

.el-upload__tip {
  font-size: 12px;
  color: #999;
}
</style>
